<template>
  <view class="container">
    <view class="logo-section">
      <view class="logo-circle">
        <image class="logo-image" :src="logoImage" mode="widthFix"></image>
      </view>
      <view class="logo-name">
        <image :src="nameImage"></image>
      </view>
      <view class="logo-note">
        <image :src="noteImage"></image>
      </view>
    </view>
    
    <view class="main-actions">
      <view class="action-card" @tap="handleLink('1')">
        <image class="logo-image" src="http://117.72.123.244:8080/admin-api/infra/file/4/get/20250802/品种鉴定_1754112707607.png" mode="widthFix"></image>
      </view>
      <view class="action-card" @tap="handleLink('2')">
        <image class="logo-image" src="http://117.72.123.244:8080/admin-api/infra/file/4/get/20250802/预估价格_1754112755887.png" mode="widthFix"></image>
      </view>
    </view>
    
    <view class="feature-grid">
      <view class="feature-item" @tap="handleFeature('certificate')">
        <view class="feature-icon">
          <image class="logo-image" src="http://117.72.123.244:8080/admin-api/infra/file/4/get/20250802/鉴定证书icon_1754110087846.png" mode="widthFix"></image>
        </view>
        <text class="feature-text">鉴定证书</text>
      </view>
      <view class="feature-item" @tap="handleFeature('qa')">
        <view class="feature-icon">
          <image class="logo-image" src="http://117.72.123.244:8080/admin-api/infra/file/4/get/20250802/智能问答logo_1754112115730.png" mode="widthFix"></image>
        </view>
        <text class="feature-text">智能问答</text>
      </view>
      <view class="feature-item" @tap="handleFeature('publish')">
        <view class="feature-icon">
          <image class="logo-image" src="http://117.72.123.244:8080/admin-api/infra/file/4/get/20250802/发布宠物icon_1754112174635.png" mode="widthFix"></image>
        </view>
        <text class="feature-text">发布宠物</text>
      </view>
    </view>
    
    <view class="promo-banner">
      <image class="banner-image" :src="bannerImage" mode="widthFix"></image>
    </view>
    
    <view class="featured-pets">
      <view class="section-header">
        <text class="section-icon">
          <image src="http://117.72.123.244:8080/admin-api/infra/file/4/get/20250802/爪子icon_1754113483083.png"></image>
        </text>
        <text class="section-title">精选宠物</text>
      </view>
      <view class="pet-list">
        <view class="pet-card" v-for="(pet, index) in featuredPets" :key="index" @tap="viewPetDetail(pet, index)">
          <image class="pet-image" :src="pet.image" mode="aspectFill"></image>
          <view class="pet-info">
            <view class="pet-name-row">
              <text class="pet-name">{{pet.name}}</text>
              <text :class="['pet-gender', pet.gender]">{{pet.gender==='male'?'♂':'♀'}}</text>
            </view>
            <view class="pet-price-row">
              <text class="pet-price">{{"¥ "+pet.price}}</text>
              <text class="pet-age">{{pet.age}}</text>
            </view>
          </view>
          <view class="pet-arrow">
            <text class="iconfont icon-right"></text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      logoImage: 'http://117.72.123.244:8080/admin-api/infra/file/4/get/20250802/logo_1754136687536.png',
      nameImage: 'http://117.72.123.244:8080/admin-api/infra/file/4/get/20250802/溯宠_1754136720887.png',
      noteImage: 'http://117.72.123.244:8080/admin-api/infra/file/4/get/20250802/SUCHONG_1754136742021.png',
      bannerImage: 'http://117.72.123.244:8080/admin-api/infra/file/4/get/20250802/banner_1754136786857.png',
      featuredPets: []
    }
  },
  methods: {
    handleLink(type) {
      // Handle link action
    },
    handleFeature(feature) {
      // Handle feature action
    },
    viewPetDetail(pet, index) {
      // View pet detail
    }
  }
}
</script>

<style>
/* uni-app built-in common style variables */
/* Behavior related colors */
/* Basic text colors */
/* Background colors */
/* Border colors */
/* Size variables */
/* Text size */
/* Image size */
/* Border Radius */
/* Horizontal spacing */
/* Vertical spacing */
/* Transparency */
/* Article scene related */

.container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f8f9ff 0%, #e8f2ff 100%);
  position: relative;
  background: #fffcf3 url("http://117.72.123.244:8080/admin-api/infra/file/4/get/20250802/背景纹理_1754109639093.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
}

/* Status bar */
.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  height: 44rpx;
}

.status-time {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
}

.status-icons {
  display: flex;
  align-items: center;
  gap: 10rpx;
  color: #333;
  font-size: 24rpx;
}

/* Logo area */
.logo-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 120rpx 0 20rpx 0;
}

.logo-circle {
  width: 300rpx;
  height: 300rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20rpx;
  position: relative;
}

.logo-name {
  margin-top: 40rpx;
  margin-bottom: 40rpx;
  width: 240rpx;
  height: 100rpx;
  color: #333;
  font-size: 48rpx;
  font-weight: bold;
}

.logo-name image {
  width: 300rpx;
  height: 100rpx;
}

.logo-note {
  font-size: 24rpx;
  color: #666;
  letter-spacing: 2rpx;
}

.logo-note image {
  width: 200rpx;
  height: 30rpx;
}

/* Main action buttons */
.main-actions {
  display: flex;
  gap: 20rpx;
  padding: 0 30rpx;
  margin-bottom: 40rpx;
}

.action-card {
  flex: 1;
  height: 200rpx;
  background: #fff;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.action-card image {
  width: 200rpx;
  height: 40rpx;
}

.action-card:active {
  transform: scale(0.98);
}

.action-text {
  font-size: 32rpx;
  font-weight: 600;
  color: #4a90e2;
}

/* Feature grid */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15rpx;
  padding: 0 40rpx;
  margin-bottom: 40rpx;
}

.feature-item {
  margin: 0 30rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 10rpx 10rpx;
  text-align: center;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  width: auto;
  min-width: 0;
}

.feature-item:active {
  transform: scale(0.95);
}

.feature-icon {
  width: 80rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  font-size: 32rpx;
  color: #fff;
}

.feature-icon image {
  height: 60rpx;
  width: 60rpx;
}

.feature-text {
  font-size: 24rpx;
  color: #0073C6;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Promo banner */
.promo-banner {
  position: relative;
  margin: 100rpx 40rpx 40rpx 40rpx;
  border-radius: 20rpx;
  overflow: hidden;
}

.promo-banner image {
  width: 100%;
}

.promo-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.promo-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #4a90e2;
  flex: 1;
}

.promo-illustration {
  width: 120rpx;
  height: 80rpx;
  position: relative;
}

.pet-illustration {
  position: relative;
  width: 100%;
  height: 100%;
}

.dog-illustration {
  position: absolute;
  top: 10rpx;
  left: 20rpx;
  width: 30rpx;
  height: 30rpx;
  background: #ffd700;
  border-radius: 50%;
}

.cat-illustration {
  position: absolute;
  top: 20rpx;
  left: 50rpx;
  width: 25rpx;
  height: 25rpx;
  background: #8b4513;
  border-radius: 50%;
}

.house-illustration {
  position: absolute;
  bottom: 10rpx;
  right: 10rpx;
  width: 40rpx;
  height: 30rpx;
  background: #4a90e2;
  border-radius: 8rpx;
}

.ai-label {
  position: absolute;
  top: 10rpx;
  left: 10rpx;
  font-size: 20rpx;
  color: #999;
  background: rgba(255, 255, 255, 0.8);
  padding: 4rpx 8rpx;
  border-radius: 10rpx;
}

/* Featured pets */
.featured-pets {
  padding: 0 30rpx 120rpx;
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.section-icon image {
  height: 60rpx;
  width: 60rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #4a90e2;
  margin-left: 10rpx;
}

.pet-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.pet-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 20rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.pet-card:active {
  transform: scale(0.98);
}

.pet-image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 15rpx;
  margin-right: 20rpx;
}

.pet-info {
  flex: 1;
}

.pet-name-row {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.pet-name {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
}

.pet-gender {
  margin-left: 10rpx;
  font-size: 24rpx;
  font-weight: bold;
}

.pet-gender.male {
  color: #4a90e2;
}

.pet-gender.female {
  color: #e91e63;
}

.pet-price-row {
  display: flex;
  align-items: center;
  gap: 15rpx;
}

.pet-price {
  font-size: 32rpx;
  font-weight: bold;
  color: #ff4757;
}

.pet-age {
  font-size: 22rpx;
  color: #4a90e2;
  background: rgba(74, 144, 226, 0.1);
  padding: 4rpx 12rpx;
  border-radius: 20rpx;
}

.pet-arrow {
  color: #4a90e2;
  font-size: 32rpx;
}

/* Bottom navigation */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #4a90e2;
  display: flex;
  padding: 10rpx 0;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10rpx 0;
  transition: all 0.3s ease;
}

.nav-item.active {
  opacity: 1;
}

.nav-item:not(.active) {
  opacity: 0.7;
}

.nav-text {
  font-size: 20rpx;
  color: #fff;
  margin-top: 5rpx;
}

/* Icon font */
.iconfont {
  font-family: "iconfont" !important;
  font-size: 32rpx;
  color: #fff;
}

.icon-wifi:before {
  content: "\e6b8";
}

.icon-battery:before {
  content: "\e6b9";
}

.icon-certificate:before {
  content: "\e6ba";
}

.icon-qa:before {
  content: "\e6bb";
}

.icon-publish:before {
  content: "\e6bc";
}

.icon-paw:before {
  content: "\e6bd";
}

.icon-right:before {
  content: "\e6be";
}

.icon-home:before {
  content: "\e6bf";
}

.icon-mall:before {
  content: "\e6c0";
}

.icon-identify:before {
  content: "\e6c1";
}
</style>